<script setup lang="tsx">
import { ContentWrap } from '@/components/ContentWrap'
import { Search } from '@/components/Search'
import { Dialog } from '@/components/Dialog'
import { useI18n } from '@/hooks/web/useI18n'
import { ElTag } from 'element-plus'
import { FormSchema } from '@/components/Form'
import { Table, TableColumn } from '@/components/Table'
import { useTable } from '@/hooks/web/useTable'
import { ref, unref, reactive } from 'vue'
import Detail from './components/Detail.vue'
import { BaseButton } from '@/components/Button'
import { DictPageResponse } from '@/api/dict/types'
import { getLogPageApi } from '@/api/log'

const { t } = useI18n()

const { tableRegister, tableState, tableMethods } = useTable({
  fetchDataApi: async () => {
    const { currentPage, pageSize } = tableState
    const { data, pagination } = await getLogPageApi({
      pageNum: unref(currentPage),
      pageSize: unref(pageSize),
      ...unref(searchParams)
    })
    return {
      list: data,
      total: pagination?.total || 0
    }
  }
})
const { loading, dataList, total, currentPage, pageSize } = tableState
const { getList } = tableMethods

const tableColumns = reactive<TableColumn[]>([
  {
    field: 'index',
    label: t('common.tableIndex'),
    type: 'index'
  },
  {
    field: 'operatorName',
    label: t('log.operatorName')
  },
  {
    field: 'ip',
    label: 'IP'
  },
  {
    field: 'ua',
    label: 'UA'
  },
  {
    field: 'isError',
    label: t('log.isError'),
    slots: {
      default: ({ row }) => {
        return (
          <ElTag type={row.isError ? 'danger' : 'primary'}>
            {row.isError ? t('common.yes') : t('common.no')}
          </ElTag>
        )
      }
    }
  },
  {
    field: 'requestId',
    label: t('log.requestId')
  },
  {
    field: 'createdAt',
    label: t('common.createTime')
  },
  {
    field: 'action',
    label: t('common.action'),
    width: 86,
    slots: {
      default: (data: any) => {
        return (
          <BaseButton
            type="success"
            v-prem={{ value: 'dicts:detail' }}
            onClick={() => action(data.row)}
          >
            {t('common.detail')}
          </BaseButton>
        )
      }
    }
  }
])

const searchSchema = reactive<FormSchema[]>([
  {
    field: 'operatorName',
    label: t('log.operatorName'),
    component: 'Input'
  },
  {
    field: 'isError',
    label: t('log.isError'),
    component: 'Select',
    componentProps: {
      options: [
        {
          label: t('common.yes'),
          value: true
        },
        {
          label: t('common.no'),
          value: false
        }
      ]
    }
  },
  {
    field: 'startTime',
    label: t('common.startTimeText'),
    component: 'DatePicker'
  },
  {
    field: 'endTime',
    label: t('common.endTimeText'),
    component: 'DatePicker'
  }
])
const searchParams = ref({})
const setSearchParams = (params: any) => {
  searchParams.value = params
  getList()
}

const dialogVisible = ref(false)

const currentRow = ref<DictPageResponse | null>(null)

const action = (row: DictPageResponse) => {
  currentRow.value = row
  dialogVisible.value = true
}
</script>

<template>
  <ContentWrap v-prem="'dicts:page'">
    <Search :schema="searchSchema" @search="setSearchParams" @reset="setSearchParams" />

    <Table
      v-model:pageSize="pageSize"
      v-model:currentPage="currentPage"
      :columns="tableColumns"
      :data="dataList"
      :loading="loading"
      :pagination="{
        total: total
      }"
      @register="tableRegister"
    />
  </ContentWrap>

  <Dialog v-model="dialogVisible" :title="t('common.detail')">
    <Detail :current-row="currentRow" />

    <template #footer>
      <BaseButton @click="dialogVisible = false">{{ t('common.close') }}</BaseButton>
    </template>
  </Dialog>
</template>
